import React, { Component } from 'react'
import { NavBar, Icon, Carousel ,Toast} from 'antd-mobile';
import "./goodDetail.scss"
import myaxios from "../../utils/myaxios"
export default class goodDetail extends Component {
  constructor(props) {
    super(props)
    console.log(props);
  }
  state = {
    goodInfo: {},
    imgHeight: 248,
    showSwiper: false,
    showCollect:false//是否收藏 默认没有
  }
  componentDidMount() {
    let { goods_id } = this.props.match.params
    // console.log(goods_id);
    myaxios.get("goods/detail", {
      params: {
        goods_id
      }
    }).then(res => {
      console.log(res);
      this.setState({
        goodInfo: res,
        showSwiper: true
      })
    }).catch(err => {
      console.log(err);
    })

    //初次进入商品详情的时候 判断是否收藏了
    let collections_str = localStorage.getItem("collections")
    let collections = JSON.parse(collections_str)
    //判断第一次进去有没有收藏
    let index = collections.findIndex(v=>{
      if(v.goods_id === parseInt(goods_id)){
        return true
      }
    })
    if(index!=-1){
      this.setState({
        showCollect:true
      })
    }
  }
  // 点击收藏功能
  handleCollect=(params) => {
    //collections 代表的是收藏的数组  数据
    //第一步分析  localStorage 有没有
    let collections_str =localStorage.getItem("collections")
    //我们要查看里面的数据 所以要先转成对象 可能为空
    let collections = JSON.parse(collections_str || "[]")
    //对存储的数据进行  findIndex 
    //判断是否在收藏里、
    let index = collections.findIndex(v=>{
      if(v.goods_id === this.state.goodInfo.goods_id){
        return true
      }
    })
    //判断 
    if(index!=-1){
      //代表之前就收藏过  
      collections.splice(index,1);
      Toast.success("取消收藏成功", 1);
      this.setState({
        showCollect:false
      })
    }else{
      Toast.success("收藏成功", 1);
      collections.push(this.state.goodInfo);
      this.setState({
        showCollect:true
      })
    }
    localStorage.setItem("collections",JSON.stringify(collections))
  }
  //添加到购物车里面
  addToCart=(params) => {
    //1.首先我们在本地获取购物车的数据、、
    let carts_str = localStorage.getItem("carts")
    let carts = JSON.parse(carts_str ||"[]");
    //获取本地的goods_id
    let {goods_id} = this.props.match.params
    //操作数据
    let index = carts.findIndex(v=>{
      if(v.goods_id ===parseInt(goods_id) ){
        return true
      }
    })
    //index === 为-1表示找不到
    if(index === -1){
      let goods_info = this.state.goodInfo
      goods_info.num = 1//第一次添加  为1
      goods_info.checked = true;//在购物车默认选中
      carts.push(goods_info)
    }else{
      carts[index].num++//第n 次添加时 n>1
    }
    Toast.success("添加购物车成功", 1)
    localStorage.setItem("carts",JSON.stringify(carts))
  }
  //取到购物车页面
  goToCart=(params) => {
    this.props.history.push("/cart")
  }
  //立即购买
  pay=(params) => {
    this.props.history.push("/pay")
  }
  
  render() {
    return (
      <div className="yg-detail">
        <NavBar
          className="yg-searchCenter-nav"
          mode="light"
          icon={<Icon type="left" />}
          onLeftClick={() => window.history.go(-1)}
        >
          商品详情
      </NavBar>
        {/* 商品详情首页轮播的开始 */}
        <div className="yg-detail-swiper">
          {/* this.state.showSwiper */}
          {this.state.showSwiper &&(
          <Carousel
            autoplay={true}
            infinite
          >
            {this.state.goodInfo.pics && this.state.goodInfo.pics.map(val => (
              <div
                className="imageWrapper"
                key={val.goods_id}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={val.pics_mid}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            ))}
          </Carousel>
          )}
        </div>
        {/* 商品详情首页轮播的结束 */}
        {/* 价格和分享区域开始 */}
        <div className="yg-detail-price">
          <div className="price-left">
            <span className="title1">￥{this.state.goodInfo.goods_price}</span>
          </div>
          <div className="price-right">
            <i className="iconfont icon-fenxiang1"></i>
            <i  className={this.state.showCollect?"iconfont icon-shoucang active":"iconfont icon-shoucang"} onClick={this.handleCollect}></i>
          </div>
        </div>
        {/* 价格和分享区域结束 */}
        {/* 商品标题部分开始 */}
        <div className="yg-detail-title">{this.state.goodInfo.goods_name}</div>
        {/* 商品标题部分结束 */}
        {/* 图为吗详情开始 */}
        <div className="yg-detail-graphicDetails">
          <div className="graphicDetails-title">
            图文详情
          </div>
          <div className="graphicDetails-content" dangerouslySetInnerHTML={{__html:this.state.goodInfo.goods_introduce}}>

          </div>
        </div>
        {/* 图为吗详情结束 */}
        {/* 底部工具栏的开始 */}
        <div className="yg-detail-bottom">
          <div className="bottom-contact">
            <i className="iconfont icon-lianxikefu"></i>
            <div className="titie">联系客服</div>
          </div>
          <div className="bottom-cart" onClick={this.goToCart}>
            <i className="iconfont icon-gouwuche"></i>
            <div className="titie">购物车</div>
          </div>
          <div className="bottom-addToCart">
            <span className="title1" onClick={this.addToCart}>加入购物车</span>
          </div>
          <div className="bottom-buy" onClick={this.pay}>
            <span className="title2">立即购买</span>
          </div>
        </div>
        {/* 底部工具栏的结束 */}
      </div>
    )
  }
}
